import { useEffect } from "react";
import styles from './DyDownload.less';
import { Button } from "antd";

export default () => {

    useEffect(() => {

    }, []);

    const parseVideo = async (videoUrl: string) => {
        // 1. 把用户粘贴的链接做 URI 编码，防止出现&、?等字符导致参数错位
        const target = encodeURIComponent(videoUrl);

        // 2. 拼装接口地址（minimal=false 表示返回完整字段）
        const api = `https://douyin.wtf/api/hybrid/video_data?url=${target}&minimal=false`;

        try {
            const res = await fetch(api, {
                method: "GET",
                mode: "cors", // 默认浏览器会发 CORS 预检，接口必须允许跨域
            });

            if (!res.ok) {
                throw new Error(`接口异常 ${res.status}`);
            }

            const json = await res.json();
            if (!json.status) {
                throw new Error(json.msg || "解析失败");
            }

            // 3. 拿到无水印地址（字段名以实际返回为准）
            const {
                desc, // 视频标题
                video_url, // 无水印播放地址
                cover, // 封面
            } = json.data;

            return { desc, video_url, cover };
        } catch (err) {
            console.error(err);
            throw err; // 交给调用方处理
        }
    };

    return (
        <div className={styles.container}>
            <Button onClick={async () => {
                const data = await parseVideo('https://v.douyin.com/HBfrrKjywew/');
                console.log(`## data=${JSON.stringify(data)}`);
            }}>解析视频</Button>
        </div>
    );
}
